<template>
  <div>
    <el-row class="title-bar">
      <span class="title-bar-span">扩展信息</span>
      <el-button class="title-button" icon="el-icon-edit" v-show="!is_org_edit" type="text" @click="handleOrgUpdate"
        v-hasPermi="['labdata:orgThird:edit']"></el-button>
      <el-button class="title-button" icon="el-icon-close" v-show="is_org_edit" type="text" @click="handleOrgClose"
        ></el-button>
      <el-button class="title-button" icon="el-icon-check" v-show="is_org_edit" type="text" @click="handleOrgSubmit"
        v-hasPermi="['labdata:orgThird:edit']"></el-button>
    </el-row>
    <el-form ref="form" :model="form" :rules="rules">
    <table class="tb_edit">
    <tr>
      <td class="td_label">所属学科:</td>
      <td class="td_text"><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.belongSubjectOptOptions,form.belongSubjectOpt)"></span>
       <el-form-item v-show="is_org_edit" label="" prop="belongSubjectOpt" class="smallItem">
       <el-select  v-model="form.belongSubjectOpt" placeholder="请选择所属学科" size="small" class="input_w">
           <el-option
             v-for="dict in belongSubjectOptOptions"
             :key="dict.dictValue"
             :label="dict.dictLabel"
             :value="dict.dictValue"
           ></el-option>
        </el-select>
        </el-form-item>
      </td>
      <td class="td_label1">实验室用途:</td>
      <td class="td_text"><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labPurposeOptOptions,form.labPurposeOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="labPurposeOpt" class="smallItem">
          <el-select  v-model="form.labPurposeOpt" placeholder="请选择实验室类型" size="small" class="input_w">
              <el-option
                v-for="dict in labPurposeOptOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              ></el-option>
           </el-select>
         </el-form-item>
      </td>
      <td class="td_label">实验室级别:</td>
      <td class="td_text"><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labRankOptOptions,form.labRankOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="labRankOpt" class="smallItem">
        <el-select  v-model="form.labRankOpt" placeholder="请选择实验室级别" size="small" class="input_w">
            <el-option
              v-for="dict in labRankOptOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
         </el-select>
         </el-form-item>
      </td>
    </tr>
    <tr >
      <td>实验室类型:</td>
      <td><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labTypeOptOptions,form.labTypeOpt)"></span>
       <el-form-item v-show="is_org_edit" label="" prop="labTypeOpt" class="smallItem">
       <el-select  v-model="form.labTypeOpt" placeholder="请选择实验室类型" size="small" class="input_w">
           <el-option
             v-for="dict in labTypeOptOptions"
             :key="dict.dictValue"
             :label="dict.dictLabel"
             :value="dict.dictValue"
           ></el-option>
        </el-select>
        </el-form-item>
      </td>
      <td>风险等级:</td>
      <td><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.riskRankOptOptions,form.riskRankOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="riskRankOpt" class="smallItem">
          <el-select  v-model="form.riskRankOpt" placeholder="请选择实验室风险等级" size="small" class="input_w">
              <el-option
                v-for="dict in riskRankOptOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              ></el-option>
           </el-select>
         </el-form-item>
      </td>
      <td>安全标识:</td>
      <td>
        <LabdictCom v-if="isPermit('labdata:labdict:query')"
        :isEdit="is_org_edit" :labId="currentOrg.orgId" :dictType="safetySignsDic.dictType" :dictName="safetySignsDic.dictTypeName" ref="labdic"></LabdictCom>
      </td>
    </tr>
    <tr>
      <td>危<span style="margin-left: 7px;"></span>险<span style="margin-left: 7px;"></span>源:</td>
      <td>
        <LabdictCom v-if="isPermit('labdata:labdict:query')" :isEdit="is_org_edit" :labId="currentOrg.orgId" :dictType="dangerSourceDic.dictType" :dictName="dangerSourceDic.dictTypeName" ref="labdic1"></LabdictCom
      </td>
      <td>防护要点:</td>
      <td>
          <LabdictCom v-if="isPermit('labdata:labdict:query')" :isEdit="is_org_edit" :labId="currentOrg.orgId" :dictType="protectedKeyDic.dictType" :dictName="protectedKeyDic.dictTypeName" ref="labdic2"></LabdictCom>
      </td>
      <td>公共实验室:</td>
      <td>
        <span v-show="!is_org_edit" v-text="this.selectDictLabel(this.isOrNotOptions,form.isShared)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="isShared" class="smallItem">
          <el-select  v-model="form.isShared" placeholder="请选择是否公共实验室" size="small" class="input_w">
              <el-option
                v-for="dict in isOrNotOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
           </el-select>
         </el-form-item>
      </td>
    </tr>
    <tr>
      <td>实验室地址:</td>
      <td>
          <LbroomCom v-if="isPermit('labdata:lbroom:query')" :isEdit="is_org_edit" :labId="currentOrg.orgId"  ref="labroom"></LbroomCom>
      </td>
      <td>建筑面积:</td>
      <td><span v-show="!is_org_edit"  v-text="form.floorage"></span>
        <el-form-item v-show="is_org_edit" label="" prop="floorage" class="smallItem">
          <el-input v-model="form.floorage" type="number" placeholder="请输入建筑面积(平米)" size="small" class="input_w"/>(平米)
        </el-form-item>
      </td>
      <td class="td_label">使用面积:</td>
      <td class="td_text"><span v-show="!is_org_edit"   v-text="form.useArea"></span>
        <el-form-item v-show="is_org_edit" label="" prop="useArea" class="smallItem">
            <el-input v-model="form.useArea" type="number" placeholder="请输入使用面积(平米)" size="small" class="input_w"/>(平米)
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td>可容纳人数:</td>
      <td><span v-show="!is_org_edit" v-text="form.capacity"></span>
        <el-form-item v-show="is_org_edit" label="" prop="capacity" class="smallItem">
           <el-input v-model="form.capacity" type="number" placeholder="请输入可容纳人数" size="small" class="input_w"/>
         </el-form-item>
      </td>
      <td>实验室桌数:</td>
      <td><span v-show="!is_org_edit" v-text="form.tableNums"></span>
          <el-form-item v-show="is_org_edit" label="" prop="tableNums" class="smallItem">
            <el-input v-model="form.tableNums" type="number" placeholder="请输入实验室桌数(工位)" size="small" class="input_w"/>(工位)
          </el-form-item>
      </td>
      <td>特种设备:</td>
      <td>
          <span v-show="!is_org_edit" v-text="this.selectDictLabel(this.specialEquipmentOptOptions,form.specialEquipmentOpt)"></span>
            <el-form-item v-show="is_org_edit" label="" prop="specialEquipmentOpt" class="smallItem">
            <el-select  v-model="form.specialEquipmentOpt" placeholder="请选择特种设备" size="small" class="input_w">
                <el-option
                  v-for="dict in specialEquipmentOptOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
             </el-select>
          </el-form-item>
      </td>
    </tr>
    <tr>
      <td>涉及危化品:</td>
      <td><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.hasHazardousOptOptions,form.hasHazardousOpt)"></span>
          <el-form-item v-show="is_org_edit" label="" prop="hasHazardousOpt" class="smallItem">
            <el-select v-model="form.hasHazardousOpt" placeholder="请选择涉及危化品" size="small" class="input_w">
              <el-option
                v-for="dict in hasHazardousOptOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              ></el-option>
            </el-select>
          </el-form-item>
      </td>
      <td>可存气瓶:</td>
      <td>
        <GasCylinderNumCom v-if="isPermit('labdata:gasCylinderNum:query')" :isEdit="is_org_edit"  :labId="currentOrg.orgId"  ref="gaseCylinderNum"></GasCylinderNumCom>
      </td>
      <td>实验平台:</td>
      <td><span v-show="!is_org_edit" v-text="this.selectDictLabel(this.labPlatformOptOptions,form.labPlatformOpt)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="labPlatformOpt" class="smallItem">
          <el-select v-model="form.labPlatformOpt" placeholder="请选择实验平台" size="small" class="input_w">
            <el-option
              v-for="dict in labPlatformOptOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
      </td>
    </tr>
    <tr>
      <td>仅有计算机:</td>
      <td>
        <span v-show="!is_org_edit" v-text="this.selectDictLabel(this.isOrNotOptions,form.computerRoom)"></span>
        <el-form-item v-show="is_org_edit" label="" prop="computerRoom" class="smallItem">
          <el-select  v-model="form.computerRoom" placeholder="请选择是否" size="small" class="input_w">
              <el-option
                v-for="dict in isOrNotOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              ></el-option>
           </el-select>
         </el-form-item>
      </td>
      <td></td>
      <td>
      </td>
      <td class="td_label"></td>
      <td class="td_text">
      </td>
    </tr>
    </table>
    </el-form>

  </div>
</template>

<script>
import { getOrgThird, addOrgThird, updateOrgThird} from "@/api/labdata/orgThird";
import LabdictCom from "../labdict/dict-com.vue";
import LbroomCom from "../lbroom/index.vue";
import GasCylinderNumCom from "../gasCylinderNum/index.vue";
export default {
  name: "OrgThirdCom",
  components:{LabdictCom, LbroomCom, GasCylinderNumCom},
  data() {
    return {
      permissions:{},
      safetySignsDic: {"dictType":"1","dictTypeName":"安全标识"},
      dangerSourceDic: {"dictType":"2","dictTypeName":"危险源"},
      protectedKeyDic: {"dictType":"3","dictTypeName":"防护要点"},
      currentOrg:{},
      isNew : true,
      //是否机构处于编辑状态
      is_org_edit: false,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否公共实验室
      isOrNotOptions:[],
      // 所属学科 dic字典
      belongSubjectOptOptions: [],
      // 实验室类型字典
      labTypeOptOptions: [],
      // 涉及危化品字典
      hasHazardousOptOptions: [],
      // 实验室用途字典
      labPurposeOptOptions: [],
      // 实验室风险等级字典
      riskRankOptOptions: [],
      // 实验室级别字典
      labRankOptOptions: [],
      // 特种设备字典
      specialEquipmentOptOptions: [],
      // 实验平台字典
      labPlatformOptOptions: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        belongSubjectOpt: [
          { required: true, message: "所属学科不能为空", trigger: "change" }
        ],
        labTypeOpt: [
          { required: true, message: "实验室类型不能为空", trigger: "change" }
        ],
        classRoomId: [
          { required: true, message: "实验室地址不能为空", trigger: "blur" }
        ],
        capacity: [
          { required: true, message: "可容纳人数不能为空", trigger: "blur" }
        ],
        hasHazardousOpt: [
          { required: true, message: "涉及危化品不能为空", trigger: "change" }
        ],
        labPurposeOpt: [
          { required: true, message: "实验室用途不能为空", trigger: "change" }
        ],
        riskRankOpt: [
          { required: true, message: "实验室风险等级不能为空", trigger: "change" }
        ],
        protectionKeyOpt: [
          { required: true, message: "防护要点不能为空", trigger: "blur" }
        ],
        floorage: [
          { required: true, message: "建筑面积(平方米)不能为空", trigger: "blur" }
        ],
        tableNums: [
          { required: true, message: "实验室桌数(工位)不能为空", trigger: "blur" }
        ],
        cylinderRecordId: [
          { required: true, message: "允许存放气瓶数量不能为空", trigger: "blur" }
        ],
        labRankOpt: [
          { required: true, message: "实验室级别不能为空", trigger: "change" }
        ],
        useArea: [
          { required: true, message: "使用面积(平方米)不能为空", trigger: "blur" }
        ],
        specialEquipmentOpt: [
          { required: true, message: "特种设备不能为空", trigger: "change" }
        ],
        labPlatformOpt: [
          { required: true, message: "实验平台不能为空", trigger: "change" }
        ]
      }
    };
  },
  props: {
      childOrg: {type:Object,default:()=>({})},
  },
  watch: {
      childOrg:function(newVal, oldVal){
        this.currentOrg = newVal;
        this.is_org_edit = false;
        this.resetField();
        this.getData();
      }
  },
  created() {
    this.permissions = this.$store.getters.permissions;
    this.getDicts("belongSubjectOpt").then(response => {
      this.belongSubjectOptOptions = response.data;
    });
    this.getDicts("labTypeOpt").then(response => {
      this.labTypeOptOptions = response.data;
    });
    this.getDicts("hasHazardousOpt").then(response => {
      this.hasHazardousOptOptions = response.data;
    });
    this.getDicts("labPurposeOpt").then(response => {
      this.labPurposeOptOptions = response.data;
    });
    this.getDicts("riskRankOpt").then(response => {
      this.riskRankOptOptions = response.data;
    });
    this.getDicts("labRankOpt ").then(response => {
      this.labRankOptOptions = response.data;
    });
    this.getDicts("specialEquipmentOpt").then(response => {
      this.specialEquipmentOptOptions = response.data;
    });
    this.getDicts("labPlatformOpt").then(response => {
      this.labPlatformOptOptions = response.data;
    });
    this.getDicts("isOrNotOpt").then(response => {
      this.isOrNotOptions = response.data;
    });
    this.currentOrg = this.childOrg;
    this.getData();
  },
  methods: {
   /** 查询二级机构信息列表 */
   resetField(){
      this.resetForm("form");
   },
   isPermit(permitKey){
     if(this.$store.state.user.name=='admin'){
       return true;
     }
     let  permissions = this.$store.getters.permissions;
     return permissions.includes(permitKey);
   },
   getData() {
     this.loading = true;
     getOrgThird(this.currentOrg.orgId).then(response => {
       this.isNew = response.data == null;
       if(!this.isNew){
         this.form = response.data;
       }
       this.loading = false;
     });
   },
  /* refreshDicCom(){
     this.$refs.labdic.refreshData(this.is_org_edit, this.currentOrg.orgId);
     this.$refs.labdic1.refreshData(this.is_org_edit, this.currentOrg.orgId);
     this.$refs.labdic2.refreshData(this.is_org_edit, this.currentOrg.orgId);
     this.$refs.labroom.refreshData(this.is_org_edit, this.currentOrg.orgId);
     this.$refs.gaseCylinderNum.refreshData(this.is_org_edit, this.currentOrg.orgId);
   }, */
  /* refreshData(parentOrg){
     this.currentOrg = parentOrg;
     this.getData();
     this.refreshDicCom();
   }, */
   handleOrgUpdate(){
     this.is_org_edit = true;
     this.getData();
   },
   handleOrgClose(){
     getOrgThird(this.currentOrg.orgId).then(response => {
       this.isNew = response.data == null;
       if(!this.isNew){
         this.form = response.data;
       }
       this.is_org_edit = false;
     });

   },
   handleOrgSubmit(){
      this.$refs["form"].validate(valid => {
       this.form.labId = this.currentOrg.orgId;
       if (valid) {
         if(this.isNew){
           addOrgThird(this.form).then(response => {
             this.msgSuccess("新增成功");
             this.is_org_edit = false;
             this.refreshDicCom();
           });
         }else{
           updateOrgThird(this.form).then(response => {
             this.msgSuccess("修改成功");
             this.is_org_edit = false;
             this.refreshDicCom();
           });
         }
       }
     });
   },
  }
};
</script>
<style type="text/css" lang="scss" scoped>
  .input_w{
    width: 140px;
    height: 32px;
  }
  .tb_edit{
  }
  .tb_edit  td{
    padding: 10px 5px 10px 0px;
  }
  .td_text{
    text-align: left;
    valign: middle;
    width:200px;
  }
  .td_label{
    min-width:80px;
    valign:middle;
  }
  .td_label1{
    min-width:80px;
    valign:middle;
  }
  .el-form-item{
    margin-bottom: 0px;
  }
  .el-form-item__content{
    line-height: 26px;
  }
  .el-form-item::before{
    display: none;
  }
  .el-form-item::after{
    display: none;
  }
</style>
